<template>
    <el-row style="min-width: 1024px;">
        <el-row type="flex" align="top" justify="space-around">
            <el-col :offset="1" :span="11">
                <el-row type="flex" align="middle" justify="center">
                    <el-col :span="3">
                        <p class="tagTitle">回收概览</p>
                    </el-col>
                    <el-col :offset="1" :span="21">
                        <el-select v-model="activeProjectKey"
                                   placeholder="请选择"
                                   @change="projectChangeHandle"
                        >
                            <el-option
                                v-for="item in projectListData"
                                :key="item.key"
                                :label="item.name"
                                :value="item.key"
                            />
                        </el-select>
                    </el-col>
                </el-row>
                <el-row
                    style="width: 730px; height: 500px; border-radius: 10px; border: 1px solid rgba(187, 187, 187, 100);"
                >
                    <el-row style="height: 50px;" />
                    <el-row>
                        <el-row type="flex" justify="space-around" style="text-align: center;">
                            <el-col :span="5">
                                <span>有效回收量</span>
                            </el-col>
                            <el-col :span="5">
                                <span>总浏览量</span>
                            </el-col>
                            <el-col :span="5">
                                <span>回收率</span>
                            </el-col>
                            <el-col :span="5">
                                <span>平均完成时间</span>
                            </el-col>
                        </el-row>
                        <el-row type="flex" justify="space-around" style="text-align: center;">
                            <el-col :span="5">
                                <count-to :end-val="projectStats.completeCount"
                                          style="font-size: 20px;"
                                />
                            </el-col>
                            <el-col :span="5">
                                <count-to :end-val="projectStats.viewCount" style="font-size: 20px;" />
                            </el-col>
                            <el-col :span="5">
                                <count-to :end-val="projectStats.completeRate" style="font-size: 20px;" />
                                %
                            </el-col>
                            <el-col :span="5">
                                <span style="font-size: 20px;">
                                    {{ projectStats.avgCompleteFormatStr }}
                                </span>
                            </el-col>
                        </el-row>
                    </el-row>
                    <el-row>
                        <line-chart :chart-option="lineChartOptionData" />
                    </el-row>
                </el-row>
            </el-col>
            <el-col :span="12">
                <el-row type="flex" align="middle" justify="start">
                    <el-col :span="6">
                        <p class="tagTitle">表单提交地域分布图</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <map-chart :chart-option="mapChartOptionData" :height="'250px'" />
                    </el-col>
                </el-row>
                <el-row type="flex" justify="space-around">
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="5">
                                <p class="tagTitle">常用设备</p>
                            </el-col>
                        </el-row>
                        <el-row>
                            <pie-chart :chart-option="pieChartOptionData" :height="'250px'" />
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row>
                            <el-col :span="5">
                                <p class="tagTitle">来源渠道</p>
                            </el-col>
                        </el-row>
                        <el-row>
                            <bar-chart :chart-option="barChartOptionData" :height="'250px'" />
                        </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row style="height: 30px;" />
    </el-row>
</template>
<script>
import PieChart from '@/components/echarts/PieChart'
import LineChart from '@/components/echarts/LineChart'
import MapChart from '@/components/echarts/MapChart'
import CountTo from '@/components/CountTo'
import BarChart from '@/components/echarts/BarChart'
import {timeFormat} from '@/utils/index'

export default {
    name: 'HomeDashboard',
    components: {
        CountTo,
        PieChart,
        MapChart,
        BarChart,
        LineChart
    },
    data() {
        return {
            projectListData: null,
            projectStats: {
                avgCompleteTime: 0,
                avgCompleteFormatStr: 0,
                viewCount: 0,
                completeCount: 0,
                completeRate: 0
            },
            activeProjectKey: null,
            // 回收折现图
            lineChartOptionData: {},
            mapChartOptionData: {},
            barChartOptionData: {},
            pieChartOptionData: {}
        }
    },
    created() {
        this.$api.get('/user/project/list', {params: {status: 2}}).then(res => {
            this.projectListData = res.data
            if (res.data) {
                this.activeProjectKey = res.data[0].key
                this.projectChangeHandle()
            }
        })
    }, methods: {
        projectChangeHandle() {
            this.getProjectStats()
            this.getProjectSituation()
            this.getProjectSubmitPosition()
            this.getProjectSubmitDevice()
            this.getProjectSubmitSource()
        },
        getProjectStats() {
            this.$api.get('/user/project/report/stats', {params: {projectKey: this.activeProjectKey}}).then(res => {
                this.projectStats = res.data
                if (this.projectStats.completeCount) {
                    let rate = this.projectStats.completeCount / this.projectStats.viewCount
                    this.projectStats.completeRate = rate > 1 ? 100 : rate * 100
                    this.projectStats.avgCompleteFormatStr = timeFormat(this.projectStats.avgCompleteTime)
                }
            })
        },
        getProjectSituation() {
            this.$api.get('/user/project/report/situation', {params: {projectKey: this.activeProjectKey}}).then(res => {
                this.lineChartOptionData = {
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisTick: {
                            show: false
                        },
                        data: res.data.map(item => {
                            return item.createTime
                        })
                    },
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                        color: 'black',
                        borderWidth: '1',
                        borderColor: 'rgb(156,209,255)',
                        textStyle: {
                            color: 'black'
                        }
                    },
                    yAxis: {
                        type: 'value',
                        minInterval: 1
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    series: [{
                        data: res.data.map(item => {
                            return item.count
                        }),
                        name: '回收数',
                        stack: '总量',
                        type: 'line',
                        areaStyle: {}
                    }]
                }
            })
        },
        // 项目提交地址
        getProjectSubmitPosition() {
            this.$api.get('/user/project/report/position', {params: {projectKey: this.activeProjectKey}}).then(res => {
                this.mapChartOptionData = {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                        color: 'black',
                        borderWidth: '1',
                        borderColor: 'rgb(156,209,255)',
                        textStyle: {
                            color: 'black'
                        }
                    },
                    visualMap: {
                        type: 'piecewise',
                        show: false,
                        pieces: [
                            {min: 1500},
                            {min: 900, max: 1500},
                            {min: 310, max: 1000},
                            {min: 1, max: 300}
                        ],
                        color: ['#E0022B', '#E09107', '#A3E00B']
                    },
                    toolbox: {
                        show: false,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '提交数',
                            type: 'map',
                            mapType: 'china',
                            zoom: 1.2,
                            roam: false,
                            label: {
                                show: false,
                                color: 'rgb(0,0,0)'
                            },
                            data: Object.keys(res.data).map(key => {
                                return {name: key.replace(/省(s?)|市(s?)|\//ig, ''), value: res.data[key]}
                            })
                        }
                    ]
                }
            })

        },
        getProjectSubmitSource() {
            this.$api.get('/user/project/report/source', {params: {projectKey: this.activeProjectKey}}).then(res => {
                this.barChartOptionData = {
                    tooltip: {
                        trigger: 'axis',
                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                        color: 'black',
                        borderWidth: '1',
                        borderColor: 'rgb(156,209,255)',
                        textStyle: {
                            color: 'black'
                        },
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: res.data.map(item => {
                            return item.browserName ? item.browserName : '其他'
                        })
                    },
                    series: [
                        {
                            barWidth: 30,
                            name: '数量',
                            type: 'bar',
                            data: res.data.map(item => {
                                return item.count
                            })
                        }
                    ]
                }
            })
        },
        getProjectSubmitDevice() {
            this.$api.get('/user/project/report/device', {params: {projectKey: this.activeProjectKey}}).then(res => {
                this.pieChartOptionData = {
                    tooltip: {
                        trigger: 'item',
                        backgroundColor: 'rgba(255,255,255,0.8)', // 通过设置rgba调节背景颜色与透明度
                        color: 'black',
                        borderWidth: '1',
                        borderColor: 'rgb(156,209,255)',
                        textStyle: {
                            color: 'black'
                        }
                    },
                    series: [
                        {
                            name: '设备类型',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: res.data.map(item => {
                                return {value: item.count, name: item.osName ? item.osName : '其他'}
                            })
                        }
                    ]
                }
            })
        }
    }
}
</script>

<style scoped>
.tagTitle {
    font-size: 20px;
    border-bottom: 3px solid rgba(68, 68, 68, 100);
    line-height: 25px;
}
.el-select-dropdown__item {
    width: 300px !important;
}
</style>
